<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
    .d1{
        width: 520px;
        height: 280px;
        overflow: hidden;
    }
    li{
        display: block;
        width: 24px;
        height: 24px;
        background-color: orange;
        color: white;
        text-align: center;
        float: left;
        margin: 0 10px;
        border-radius: 50%;
    }
    ul{
        display: block;
        width: 240px;
        height: 30px;
        /*border: 1px solid black;*/
        position: relative;
        top: -50px;
        left: 220px;
    }
    .l1{
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="d1">
        <img src="img/01.jpg" alt="">
        <img src="img/02.jpg" alt="">
        <img src="img/03.jpg" alt="">
        <img src="img/04.jpg" alt="">
        <img src="img/05.jpg" alt="">
    </div>
    <ul>
        <li class="l1">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>
<script>
    var index=0;
    var mg=$(".d1 img");
    var li=$("li")
    var len=mg.length;
    var lin=li.length;

    function play(n){
        mg.eq(n).fadeIn(200).siblings("img").fadeOut(200);
        li.eq(n).css('background-color','red').siblings("li").css('background-color','orange')
    }

    setInterval(function(){
        play(index);
        index++;
        if(index==len){
            index=0;
        }
    },2000);

    
     




</script>